<template lang="pug">
  div
    s-table(
      ref="table"
      reqUrl="api/milepost_record/getGrowthList"
      req-method="POST"
      :column="tableObj.column"
      :filterProps="{fields: searchConfig}"
    )
      .table-operator(slot="table-operator")
        el-button.gradientVertical(size="large"  @click="actionHandle({}, 'add')" round) 新增
      template(slot="action" slot-scope="text, scope")
        el-link(@click="actionHandle(scope, 'view')" type="success") 查看
        <!--el-link(@click="actionHandle(scope, 'add')" type="success") 新增-->
    add-drawer(v-if="modalObj.visible" :visible.sync="modalObj.visible" :id="modalObj.id" :childrenId="modalObj.childrenId" :classesId="modalObj.classesId" :title="modalObj.title" @getList="() => refreshTable(true)")
    list-modal(v-if="viewObj.visible" :visible.sync="viewObj.visible" :id="viewObj.childrenId" :title="viewObj.title")
</template>
<script>
import { mapGetters } from 'vuex'
import { column } from './config'
import AddDrawer from './components/addDrawer'
import ListModal from './components/listModal'
import { getClassesByArea } from '@/api/common'
export default {
  components: {
    AddDrawer,
    ListModal
  },
  data () {
    return {
      tableObj: {
        column
      },
      classes: [],
      classId: '',
      modalObj: {
        visible: false,
        childrenId: '',
        classesId: '',
        id: '',
        title: ''
      },
      viewObj: {
        visible: false,
        childrenId: '',
        title: ''
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    searchConfig () {
      return [
        {
          key: 'name',
          label: '宝宝姓名'
        },
        {
          label: '选择班级',
          key: 'classId',
          type: 'select',
          fieldProps: {
            options: this.classes,
            props: { value: 'id', label: 'name' }
          }
        }
      ]
    }
  },
  created () {
    this.getClasses()
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table.refresh(flag)
    },
    actionHandle (row, type) {
      console.log(row)
      if (type === 'add') {
        this.modalObj = {
          visible: true,
          childrenId: row.childrenId,
          classesId: row.classesId,
          title: row.childrenName
        }
      } else if (type === 'view') {
        this.viewObj = {
          visible: true,
          childrenId: row.childrenId,
          title: row.childrenName
        }
      }
    },
    // 获取托班班级列表
    async getClasses () {
      const { curArea } = this
      this.classes = await (getClassesByArea({ areaId: curArea.areaId }) || [])
      this.classId = this.classes[0]?.id || ''
    }
  }
}
</script>
<style lang="scss" scoped>
.photos-list {
  .img-l {
    width: 80px;
    position: relative;
     img {
        width: 100%;
        margin-right: 5px;
     }
    .el-icon-close {
      position: absolute;
      color: red;
      font-size: 18px;
      top: 0;
      right: 0;
      cursor: pointer;
    }
  }

}
</style>
